<template>
  <div id="user-guide" :style="{minHeight: height + 'px'}">
    <div class="main-width mx-auto d-flex align-items-start">
      <div class="user-guide-menu">
        <el-menu
          @select="handleSelect"
          :default-active="activeIndex">
          <template v-for="menu in routers">
            <!-- 只有一个的菜单 -->
            <el-menu-item :index="menu.name"  v-if="!(menu.children && menu.children.length > 0)" :key="menu.name">
              <span slot="title">{{menu.title}}</span>
            </el-menu-item>
            <!-- 二级菜单 -->
            <el-submenu :index="menu.title" v-if="menu.children && menu.children.length >= 1" :key="menu.name">
              <template slot="title">
                <span slot="title">{{menu.title}}</span>
              </template>
              <el-menu-item :index="i.name"  v-for="i in menu.children" :key="i.name">
                <span slot="title">{{i.title}}</span>
              </el-menu-item>
            </el-submenu>
          </template>
        </el-menu>
      </div>
      <div class="user-guide-content">
        <keep-alive>
          <router-view/>
        </keep-alive>
        <back-top></back-top>
      </div>
    </div>
  </div>
  
</template>
<script>
import { guideRouters } from '../../router/guide-router'

export default {
    name: "userguide",
    title: "使用手册",
    data () {
      return {
        routers: guideRouters.children,
        activeIndex: guideRouters.children[0].name,
      }
    },
    methods: {
      handleSelect (key, keyPath) {
        this.$router.replace({name: key})
      }
    },
    computed: {
      height () {
        return this.$store.state.height.client - this.$store.state.height.header - this.$store.state.height.footer
      }
    }
}
</script>
<style lang='scss'>
  #user-guide {
    background-color: #f2f6eb;
    padding: 50px 0;
    font-size: 14px;
    .user-guide-menu {
      padding-right: 30px;
      > ul {
        width: 200px;
        border: none;
      }
      
      .el-menu {
        background-color: transparent;
        .el-submenu__title,
        .el-menu-item {
          height: 35px;
          line-height: 32px;
          &.is-active {
            color: #fff;
            background-color: #94c05a;
            border-radius: 5px;
          }
        }
      }
    }

    .user-guide-content {
      color: #666666;
      padding: 50px 30px;
      width: 800px;
      background: #FFFFFF;
      border-radius: 10px;
      box-shadow: #cccccc 0px 0px 2px 2px;
    }
  }
</style>